import React from 'react'
import DefaultAvatar from "../../../../res/images/web/shared/缺省头像.png";
import DidUpIcon from "../../../../res/images/web/topic/up_selected@2x.png";
import UpIcon from "../../../../res/images/web/topic/up@2x.png";

const CommentDetailItem = props => {

    const formatDate = (date) => {
        const o = new Date(date * 1000)
        const md = o.toLocaleDateString().split('/').slice(1).join('/')
        const time = o.toTimeString().split(' ')[0].slice(0, 5)
        const result = `${md} ${time}`
        return result
    }

    const c = props.comment
    const level = props.level

    const avatar = <img style={{marginRight: '8px',}} className='topic-detail-avatar' alt='' src={c.Hfavatar ? c.Hfavatar : DefaultAvatar}/>
    const username = <p style={{marginBottom: '4px', color: c.Hfvip > 0 ? '#FA7268' : '#333'}}>{c.Hfname}</p>
    const date = <p className='topic-detail-time'>{formatDate(c.Hftime)}</p>
    const zan = <div className='flex-align-center topic-comment-zan'>
        <img
            alt=''
            src={c.Zan > 0 ? DidUpIcon : UpIcon}
            style={{width: 16, height: 16,}}
            onClick={props.onZan}
        />
        <span>{c.Zannum}</span>
    </div>
    let replayBtn = null
    if (level === 1) {
        replayBtn = <span
            className='topic-comment-reply-btn'
            onClick={() => props.onReply(c, i)}
        >
            回复
        </span>
    }

    const contentTxt = <div className='topic-comment-txt'>
        <p>{c.Hftxt}</p>
    </div>

    return <div className='flex-align-center'>
        {avatar}
        <div>
            {username}
            {date}
        </div>
    </div>
}

export default CommentDetailItem
